import DesktopChip from './DesktopChip';
import TSelect from 't/basic/select';

import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  pickOwnForBasicComponent,
  usePropsTwoWayValues,
} from 't/common/utils';
import {
  computed,
  defineComponent,
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  watch,
} from 'vue';

import _, { forIn } from 'lodash';

import {
  date,
  debounce,
  dom,
  setCssVar,
  useQuasar,
  scroll,
} from '@teld/q-components';

import {
  useClipProps,
  dateFilterOptsLang,
} from 't/bussiness/quick-filter/use-quick-filter';
export default defineComponent({
  props: {
    ...commonProps,
    ...useClipProps,
  },
  emits: ['filterChanged'],

  setup(props, { attrs, emit, expose, slots }) {
    const vm = getCurrentInstance();
    const $q = useQuasar();

    const modelValue = computed(() => {
      return props.clips[0];
    });

    function emitFilterChanged() {
      if (modelValue.value._isSetValueFlag) {
        delete modelValue.value._isSetValueFlag;
        return;
      }
      emit('filterChanged');
    }

    const selectOpts = ref(dateFilterOptsLang($q.lang.quickFilter, true));

    return () => {
      return (
        <DesktopChip {...props}>
          {{
            ...slots,
            default: () => (
              <TSelect
                tabindex='1'
                style='min-width: 80px; margin-right: 8px;'
                class='tr-select-noborder select-tabindex'
                borderless
                emit-value
                map-options
                v-model={modelValue.value.value}
                onUpdate:modelValue={val => {
                  // modelValue.value.selected = !!val;
                  emitFilterChanged();
                }}
                options={selectOpts.value}
              />
            ),
          }}
        </DesktopChip>
      );
    };
  },
});
